
<template>
  <div>
     <ul>
      <li v-for="item in list" :key="item.key">{{item.val}} <button @click="remove(item.id)">删除</button></li>
     </ul>
     <button @click="add">生成</button>
   </div>
</template>
 
<script>
export default {
  
  components: {},
  props: {},
  data() {
    return {
      list:[
        {id:1,val:345},
        {id:2,val:24},
      ]
    };
  },
  computed: {},
  watch: {},
  created() {},
  methods: {
    add(){
      const id=this.list.length+1
      this.list.push({
        id:id,
        val:Math.floor(Math.random()*100),
      })
    },
    remove(id){
        const index=this.list.findIndex(item=>item.id===id)
        this.list.splice(index,1)
      }
  }
};
</script>

<style scoped>
     
</style>